<template>
  <teleport to="body">
    <n-modal 
      v-model:show="visible" 
      preset="dialog" 
      :title="title" 
      :mask-closable="false"
      style="width: 600px; max-width: 90vw;"
      :class="modalClass"
    >
      <template #header>
        <div>{{ title }}</div>
      </template>
      
      <div class="generate-form">
        <n-form :model="form" label-placement="left" label-width="100px">
          <n-form-item label="模型选择">
            <ModelSelector 
              :current-model="form.modelId" 
              @select-model="handleModelSelect"
              model-tag="对话"
              direction="bottom"
            />
          </n-form-item>
          
          <n-form-item label="提示词模板">
            <PromptTemplateSelector 
              v-model="form.systemPromptId"
              :category="templateCategory"
              @template-selected="handleTemplateSelect"
              @select-template="handleTemplateSelect"
            />
          </n-form-item>
          
          <n-form-item label="生成方式">
            <n-radio-group v-model:value="form.appendMode" name="appendMode" vertical>
              <n-radio value="append">追加生成</n-radio>
              <div style="margin-left: 24px; margin-top: 4px; font-size: 12px; color: #999;">
                在现有内容后继续生成
              </div>
              <n-radio value="overwrite">覆盖生成</n-radio>
              <div style="margin-left: 24px; margin-top: 4px; font-size: 12px; color: #999;">
                清空当前内容重新生成
              </div>
              <n-radio value="newTab">新标签页</n-radio>
              <div style="margin-left: 24px; margin-top: 4px; font-size: 12px; color: #999;">
                在新标签页中生成内容
              </div>
            </n-radio-group>
          </n-form-item>
        </n-form>
      </div>
      
      <template #action>
        <n-space justify="end">
          <n-button @click="handleCancel">取消</n-button>
          <n-button type="primary" @click="handleConfirm" :loading="loading">
            {{ confirmButtonText }}
          </n-button>
        </n-space>
      </template>
    </n-modal>
  </teleport>
</template>

<script setup lang="ts">
import {computed } from 'vue'
import ModelSelector from '../../chat/components/ModelSelector.vue'
import PromptTemplateSelector from '../../prompt/components/PromptTemplateSelector.vue'

// 添加组件名称声明
defineOptions({
  name: 'GenerateDialog'
})

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    required: true
  },
  confirmButtonText: {
    type: String,
    default: '生成'
  },
  loading: {
    type: Boolean,
    default: false
  },
  form: {
    type: Object,
    required: true
  },
  templateCategory: {
    type: String,
    default: ''
  },
  modalClass: {
    type: String,
    default: ''
  }
})

// Emits
const emit = defineEmits(['update:visible', 'model-select', 'template-select', 'confirm', 'cancel'])

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 事件处理
const handleModelSelect = (modelId: number) => {
  emit('model-select', modelId)
}

const handleTemplateSelect = (template: any) => {
  // 如果传入的是模板对象，只传递ID；如果传入的是ID，直接传递
  const templateId = typeof template === 'object' ? template.id : template
  // 更新表单中的systemPromptId
  props.form.systemPromptId = templateId
  // 发出事件
  emit('template-select', templateId)
}

const handleConfirm = () => {
  emit('confirm')
}

const handleCancel = () => {
  visible.value = false
  emit('cancel')
}
</script>

<style scoped>
.generate-form {
  padding: 16px 0;
}
</style>